<template>
  <view v-if="shenheStatus == 0" class="page">
    <template v-if="res">
      <view
        v-if="res.code != 0"
        style="
          padding: 100rpx 0;
          text-align: center;
          line-height: 200rpx;
          font-size: 60rpx;
          color: #ffffff;
          background: #ff9900;
          width: 90%;
          margin: 30rpx auto;
          border-radius: 20rpx;
        "
      >
        {{ res.msg }}
      </view>
      <view class="card-box" v-if="card">
        <view class="title">{{ card.name }}</view>
        <view>
          <image
            :src="card.pic_url"
            mode="aspectFit"
            style="width: 100%"
          ></image>
        </view>
        <view class="ul-li">
          {{ $t('person.endTime') }}：<text>{{ card.end_time }}</text>
        </view>
        <view class="ul-li">
          {{ $t('coupon.used') }}：<text>{{ card.use_num }}</text>
        </view>
        <view class="ul-li">
          {{ $t('person.noUse') }}：<text>{{ card.left_num }}</text>
        </view>
        <view class="ul-li">
          <view>{{ $t('person.cancleCount') }}：</view>
          <u-number-box
            v-model="num"
            :min="1"
            :max="card.left_num"
          ></u-number-box>
        </view>
        <view style="margin-top: 20rpx">
          <u-button @click="clerkSubmit" type="primary">{{
            $t('person.confirmCancle')
          }}</u-button>
        </view>
      </view>
    </template>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: {
    Shenhe,
  },
  onLoad(t) {
    uni.setNavigationBarTitle({
      title: this.$t('title.cardClerk'),
    });
    this.id = t.scene;
    this.getOrder();
  },
  data() {
    return {
      id: '',
      res: null,
      card: null,
      num: 1,
    };
  },
  methods: {
    getOrder() {
      uni.showLoading({
        title: this.$t('home.loading'),
      });
      var that = this;
      this.$allrequest.shop
        .cardInfo({
          id: this.id,
        })
        .then(res => {
          uni.hideLoading();
          that.res = res;
          if (res.code != 0) {
            uni.showToast({
              icon: 'none',
              title: res.msg,
            });
          } else {
            this.card = res.data.card;
          }
        });
    },
    clerkSubmit() {
      var that = this;
      uni.showModal({
        title: this.$t('order.prompt'),
        content: this.$t('user.clerk'),
        success: function (res) {
          if (res.confirm) {
            that.$allrequest.shop
              .cardClerk({
                id: that.id,
                num: that.num,
              })
              .then(res => {
                uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  duration: 2000,
                });
                if (res.code == 0) {
                  setTimeout(() => {
                    uni.navigateBack({
                      delta: -1,
                    });
                  }, 2000);
                }
              });
          } else if (res.cancel) {
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.card-box {
  padding: 20rpx;
  .title {
    text-align: center;
    font-size: 40rpx;
  }
  .ul-li {
    line-height: 80rpx;
    border-bottom: 1rpx solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
